<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-案例四下拉列表左右选择</title>
</head>
<body>

<div id="s1" style="float:left;">
    <div>
        <select id="select1" multiple="multiple" style="width:100px;height:100px;">
            <option>AAAAAAAA</option>
            <option>BBBBBBBB</option>
            <option>CCCCCCCC</option>
            <option>DDDDDDDD</option>
            <option>EEEEEEEE</option>
        </select>
    </div>


    <div>
        <input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
        <input type="button" value="全部添加到右边" onclick="allToRight();"/>
    </div>
</div>

<div id="s2">
    <div>
        <select id="select2" multiple="multiple" style="width:100px;height:100px;">
            <option>QQQQQQQQ</option>
        </select>
    </div>

    <div>
        <input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
        <input type="button" value="全部添加到左边" onclick="allToLeft();"/>
    </div>
</div>

<script type="text/javascript">

    //实现全部添加到左边
    function allToLeft() {
        /*
         1、获取select2里面的option对象
         2、返回是数组，遍历数组
         3、得到每一个option对象

         4、获取到select1
         5、添加到select1里面
         - 使用appendChild方法
         */
        //获取select2
        var select2 = document.getElementById("select2");
        //获取select1
        var select1 = document.getElementById("select1");
        //获取select2里面的option
        var options1 = select2.getElementsByTagName("option");
        //遍历数组
        for(var m=0;m<options1.length;m++){
            //得到每一个option
            var op11 = options1[m];
            //添加到select1里面
            select1.appendChild(op11);
            m--;
        }
    }

    //选择添加到左边
    function selToLeft() {
        /*
         1、获取select2里面的option对象
         2、返回是数组，遍历数组
         3、得到每一个option对象
         4、判断option是否被选中
         - if条件 属性 selected == true：选择
         5、获取select1
         6、添加到select1里面
         - 使用appendChild方法
         */
        //获取select1
        var s1 = document.getElementById("select1");
        //获取到select2
        var s2 = document.getElementById("select2");
        //得到s1里面的option对象
        var opss = s2.getElementsByTagName("option");
        //遍历数组
        for(var aa=0;aa<opss.length;aa++) {
            //得到每一个option
            var op = opss[aa];
            //判断是否被选中
            if(op.selected == true) { //被选中
                //添加到select1里面
                s1.appendChild(op);
                aa--;
            }
        }
    }

    //全部添加到右边
    function allToRight() {
        /*
         1、获取第一个select下面的option对象
         2、返回数组，遍历数组
         3、得到每一个option对象
         4、得到select2
         5、添加到select2下面
         - appendChild方法
         */
        //得到select2
        var s2 = document.getElementById("select2");
        //得到select下面的option对象
        var s1 = document.getElementById("select1");
        var ops = s1.getElementsByTagName("option");//返回的是数组
        //遍历数组
        for(var j=0;j<ops.length;j++) {
            //得到每一个option对象
            var op1 = ops[j];
            //添加option到s2下面
            s2.appendChild(op1);
            j--;
        }
    }

    //实现选中添加到右边
    function selToRight() {
        /*
         1、获取select1里面的option
         - getElementsByTagName()返回是数组
         - 遍历数组，得到每一个option
         2、判断option是否被选中
         - 属性 selected，判断是否被选中
         ** selected= true: 选中
         ** selected= false：没有选择
         3、如果是选中，把选择的添加到右边去
         4、得到select2
         4、添加选择的部分
         - appendChild方法
         */
        //获取select1里面的option
        //获取select2
        var select2 = document.getElementById("select2");
        //得到select1
        var select1 = document.getElementById("select1");
        //得到option
        var options1 = select1.getElementsByTagName("option");
        //遍历数组
        for(var i=0;i<options1.length;i++) {
            //alert(i);
            //第一次循环 i=0  length：5
            //第二次循环 i=0  length：4
            //           i=0  length: 3
            var option1 = options1[i];//得到每一个option对象
            //判断是否被选中
            if(option1.selected == true) {
                //添加到select2里面
                select2.appendChild(option1);
                i--;
            }
        }

    }

</script>


</body>
</html>